Silverlight: GridSplitter with a collapse button
November 18, 2008 12 Comments
(Silverlight is much more hard-to-handle then Flex)
This is my first blog about Silverlight !!
Not much to explain here, just look at the code and ask questions.
I have added a button to the GridSplitter by sub-classing it.
Then later I used templates, styles and events to give the collapse button its look and functionality.
Of course you can make everything look better by applying styles (my collapse button is a simple red rectangle).
By handling some simple events I control the collapsing and expanding.
Notice that while dragging the splitter to the far left the button will change its arrow direction.
That was a good lesson.
update: i have made a better version of this, look here.
update: go to this post and use the best version of this control
Shemesh Spots 
Pingback: Silverlight Cream for November 18, 2008 -- #431
You said,
“Silverlight is much more hard-to-handle then Flex”
I would like to know what you mean by that, just for comparison. Were you a Flash/Flex developer before using silverlight?
Pingback: 2008 November 19 - Links for today « My (almost) Daily Links
I am also curious to hear why “Silverlight is much more hard-to-handle then Flex” from perspective of someone who already used Flex?
well…
in SL everything is longer, if in Flex i needed 2 lines to write something in SL it takes about 10 lines of code to do the same.
SL is kind of ’empty’ if you need something you most likely need to develop it yourself.
SL layouting is not nice! it does not have any work with dimensions in percentage. this is ending us doing all the size-change calculations.
SL have a weird way for styling – why not use the industry standard CSS.
SL cannot do binding to UI objects properties (e.g. u cannot bind a Canvas width to a Slider value).
SL does not know what is bitmap, with all that implicit.
i can find more, but i m not here to complain.
all-in-all: Flex+AS3 is much more friendly to the developer.
“SL have a weird way for styling – why not use the industry standard CSS.”
Because it’s NOT HTML? Because it’s not a web document?
When I hear people compare XAML to HTML and CSS and lament how XAML is not like HTML and CSS, I can’t help but think they don’t have a grasp of what XAML actually is. XAML is a way to describe user interfaces or hierarchies of objects. It allows you to seperate presentation from logic. Everything that I describe in XAML is turned into a real object. I can create the exact same user interface by creating objects in the code-behind files. Including the styling of obejcts (Brush with Color.Red). This is NOT what HTML does or what it was meant for.
Also, the databinding in WPF includes binding of properties between objects, so if that is missing in SL don’t be sure it won’t show up later.
I recommend getting a good WPF book so you can fully understand what XAML is. Something like “Windows Presentation Foundation Unleashed” is an easy read. Once you fully understand what XAML is you will no longer wonder why you can use what is essentially an unreleated technology meant to style web documents (CSS).
scott,
as i m a Flex developer in the last 3 years and web developer for the 3 years before i DO have a clue of what are the differences!
my opinion is based upon hands-on experience.
i do not care if you call it CSS or whatever – styling Silverlight is a very unpleasant, unfriendly job.
i m ending up with XAML pages that have HUNDREDS of lines just to change some minor property (try styling a DataGrid / ListBox)
and yes – CSS is much much more pleasent to work with. have you ever developed Flex applications?
and i still haven’t said anything about SL compiling with errors, very weird runtime errors messages, and above all – performance issues.
most of the time i find myself writing workarounds for bugs/holes/walls i encounter.
Silverlight have a long way to go before it is matured into a real framework one can count on!
Coming from Flex, WPF has quite the learning curve. I can see where they are coming from, but some things are a little insane.
Flex (Flash) comes from an animation root to development. WPF comes from development to design.
MS needs to improve the tools if they ever expect to get a wide following from designers.
Hello, it’s a good job, I could use it in my project with some changes. I have a grid with many columns, rows and controls.
-I was getting an error in the design view in the visual studio 2010 designer. I commented the method ExtendedGridSplitter.MeasureOverride and everything worked fine.
-In the method Page.VGridSplitter_ButtonClick I was getting some strange behavior, sometimes it worked sometimes it didn’t, so I commented the line # 52 and everything worked fine
else //if (sender != this)
-I don’t like the actual arrow direction management, I suggest moving the Page.Grid_SizeChanged code into the ExtendedGridSplitter.OnCollapseButtonClickEvent to change the arrow direction.
Thank you some much.
soon i will post a better version of this control. stand by couple of days and use the better one.
Hello, it’s a nice user control I converted your code to vb but no work:
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Ink
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Namespace GIS
_
Public Class ExtendedGridSplitter
Inherits GridSplitter
Public Const CollapseButtonElement As String = “CollapseButton”
Public Delegate Sub CollapseButtonClickEventHandler(ByVal sender As Object)
Public Event CollapseButtonClickEvent As CollapseButtonClickEventHandler
Public CollapseButton As Button
Public Sub New()
Me.DefaultStyleKey = GetType(ExtendedGridSplitter)
CollapseButton = TryCast(Me.GetTemplateChild(CollapseButtonElement), Button)
If CollapseButton IsNot Nothing Then
AddHandler CollapseButton.Click, New RoutedEventHandler(AddressOf OnCollapseButtonClickEvent)
End If
End Sub
Public Overrides Sub OnApplyTemplate()
MyBase.OnApplyTemplate()
CollapseButton = TryCast(Me.GetTemplateChild(CollapseButtonElement), Button)
If CollapseButton IsNot Nothing Then
AddHandler CollapseButton.Click, New RoutedEventHandler(AddressOf OnCollapseButtonClickEvent)
End If
End Sub
Private Sub OnCollapseButtonClickEvent(ByVal sender As Object, ByVal e As RoutedEventArgs)
RaiseEvent CollapseButtonClickEvent(sender)
End Sub
End Class
End Namespace
Error: Failed to assign to property ‘gridSplitter_collapse.components.ExtendedGridSplitter.CollapseButtonClickEvent’.
Just add a parameter as “ByVal e As RoutedEventArgs”
Public Delegate Sub CollapseButtonClickEventHandler(ByVal sender As Object, ByVal e As RoutedEventArgs)
and modify
Private Sub OnCollapseButtonClickEvent(ByVal sender As Object, ByVal e As RoutedEventArgs)
RaiseEvent CollapseButtonClickEvent(sender, e)
End Sub